<template>
	<view  :style="viewColor">
		<view class="bus-index-search">
			<view class="pd-tb10 relative">
				<text class="bus-from">出发城市/景点</text>
				<text class="bus-to">到达城市/景点</text>
				<view class="bus-index-city">
					<view @click="goStartCityList('bus')" class="bus-station station-left text-black"  :class="changeFlag?'swap-animation':''">
						<text :class="start_loc?'':'text-cf'">{{start_loc?start_loc.name:'选择出发地'}}</text>
					</view>
					<view class="station-swap-view" @click="exchange">
						<view class="iconfont icon-huanyihuan i-swap text-30 " :class="changeFlag?'swap-animation':''"></view>
						<view class="iconfont icon-tuijianqiche i-bus"></view>
					</view>
					<view @click="goEndCityList('bus')"  class="bus-station station-right text-black"  :class="changeFlag?'swap-animation':''">
						<text :class="end_loc?'':'text-cf'">{{end_loc?end_loc.name:'选择目的地'}}</text>
					</view>
				</view>
				<view class="separate-line"></view>
				<view class="date-row" @click="openDate">
					<view class="date-t">
						出发日期
					</view>
					<view v-if="selectDay" class="text-20 ft-w700 absolute " style="top: 15px;">
						<text class="mr-5">{{selectDayMd?selectDayMd:''}}</text>
						<text class="">{{selectDayWeek?selectDayWeek:''}}</text>
					</view>
					<view v-else class="text-20 ft-w700 absolute " style="top: 15px;color: #999;">
						选择出发日期
					</view>
				</view>
				<view class="separate-line"></view>
				<view class="mt-5 mb-10">
					<view class="button-search" @click="searchPlan">
						<text class="text">查询</text>
					</view>
				</view>
				<view class="history-row"  v-if="historyList&&historyList.length">
					<text class="history-text" @click="goPlan(item)" v-for="(item,index) in historyList" :key="index">
						{{item.origin}}-{{item.destination}}
					</text>
					<text class="history-text" @click="clearSearchHistory">清除历史</text>
				</view>
			</view>
			
		</view>
		<uni-popup ref="bindmobile" type="bottom" background-color="#fff">
			 <scroll-view scroll-y style="height: 500px;margin-bottom: 100px;">
			 	<calendar :salesDates="dateList" :start-date="selectDay" @callback="dateChange" @colseCal="colseCal">
			 	</calendar>
			 </scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import dayjs from '@/utils/day.js'
	import util from '@/utils/util.js'
	import { configMap } from "@/utils";
	import { mapGetters } from "vuex";
	import {
		getScenicListApi,
	} from '@/api/store.js';
	import Cache from '@/utils/cache';
	import {  getCityInfo } from '@/api/api.js';
	import { CITY_INFO , FROM_LOC, TO_LOC} from '@/config/cache'
	import calendar from '@/components/calendar/index'
	
export default {
	

  name: "tabScenic",
 components:{ calendar },
 
computed: { ...mapGetters(['viewColor'])},  
  props: {
	isOnShow: {
		type: Boolean
	} ,
  },
  watch: {
  
  	
  	isOnShow:{
  		handler(nVal,oVal){
  			console.log('nVal',nVal)
			this.initValue()
  		},
  		immediate: true,
  		deep:true
  	}
  },
data() {
    return {
	  start_loc: '',
	  end_loc: '',
	  changeFlag: false,
	  selectDay: '',
	  selectDayMd: '',
	  selectDayWeek: '',
	  historyList:[],
	  dateList: [],
    }
  },
  mounted() {
	  const tow = dayjs().add(1, 'day');
	  this.selectDay = tow.format('YYYY-MM-DD')
	  this.selectDayMd =  tow.format('MM月DD日')
	  this.selectDayWeek =  util.getWeek(tow.day())
	  console.log(this.selectDay,this.selectDayMd,this.selectDayWeek)
	  // 设置日期
	  this.initDateList()
	  this.initValue()
	 },
  methods: {
	  initValue(){
		  this.start_loc = Cache.has(FROM_LOC)?JSON.parse(Cache.get(FROM_LOC)):''
		    this.end_loc = Cache.has(TO_LOC)?JSON.parse(Cache.get(TO_LOC)):''
		  this.historyList = uni.getStorageSync('qyxhistoryListOriginDt') ? uni.getStorageSync('qyxhistoryListOriginDt') : [];
	  },
	searchPlan(){
		console.log('start_loc',this.start_loc)
		console.log('end_loc',this.end_loc)
		if (!this.start_loc) {
			this.$util.Tips({
				title: '请选择出发城市/站点'
			})
			return false;
		}
		if (!this.end_loc) {
			this.$util.Tips({
				title: '请选择到达城市/站点'
			})
			return false;
		}
		if (!this.selectDay) {
			this.$util.Tips({
				title: '请选择出发日期'
			})
			return false;
		}
		var start_city_id = '';
		var end_city_id = '';
		var start_stop_id = '';
		var end_stop_id = '';
		if(this.start_loc.type == 1){
			start_city_id = this.start_loc.id;
		}
		if(this.start_loc.type == 2){
			start_stop_id = this.start_loc.id;
		}
		if(this.end_loc.type == 1){
			end_city_id = this.end_loc.id;
		}
		if(this.end_loc.type == 2){
			end_stop_id = this.end_loc.id;
		}
		
		var historyList = this.historyList;
		for (var r = 0; r < historyList.length; r++) {
			if(historyList[r].origin == this.start_loc.name&&historyList[r].destination == this.end_loc.name){
				historyList.splice(r, 1);
			}	
		}
		historyList.length >= 10 && historyList.splice(historyList.length - 1, historyList.length);
		historyList.unshift({
			start_city_id: start_city_id,
			start_stop_id: start_stop_id,
			end_city_id: end_city_id,
			end_stop_id: end_stop_id,
			origin: this.start_loc.name,
			destination:this.end_loc.name
		})
		
		uni.setStorageSync('qyxhistoryListOriginDt', historyList);
		
		
		// uni.navigateTo({
		// 	url: '/pages/bus/plan_list/index?date='+this.selectDay
		// 	+'&start_city_id='+start_city_id
		// 	+'&start_stop_id='+start_stop_id
		// 	+'&end_city_id='+end_city_id
		// 	+'&end_stop_id='+end_stop_id
		// 	+'&origin='+this.start_loc.name
		// 	+'&destination='+this.end_loc.name
		// })
		
		uni.navigateTo({
			url: '/pages/bus/bus_list/index?date='+this.selectDay
			+'&start_city_id='+start_city_id
			+'&start_stop_id='+start_stop_id
			+'&end_city_id='+end_city_id
			+'&end_stop_id='+end_stop_id
			+'&origin='+this.start_loc.name
			+'&destination='+this.end_loc.name
		})
	},
	
	goPlan(item){
		console.log('item',item)
		 uni.navigateTo({
		 	url: '/pages/bus/plan_list/index?date='+this.selectDay
		 	+'&start_city_id='+item.start_city_id
		 	+'&start_stop_id='+item.start_stop_id
		 	+'&end_city_id='+item.end_city_id
		 	+'&end_stop_id='+item.end_stop_id
		 	+'&origin='+item.origin
		 	+'&destination='+item.destination
		 })
	},
	clearSearchHistory: function () {
	    var t = this;
	    uni.showModal({
	        title: "提示",
	        content: "清空全部历史记录？",
	        confirmColor: "#427CFF",
	        confirmText: "清空",
	        success: function (e) {
	            if (e.confirm) try {
	                uni.removeStorageSync('qyxhistoryListOriginDt'), t.historyList = [];
	            } catch (e) {
	               return this.$util.Tips({
	               	title: err
	               }); 
	            }
	        }
	    });
	},
	
	exchange(){
		if(!this.start_loc|| !this.end_loc){
			return this.$util.Tips({title: '请先选择出发地或者目的地'})
		}
		var that = this;
		this.changeFlag = true;
		let middel = this.start_loc;
	
		setTimeout(() => {
			that.changeFlag = false;
			that.start_loc = that.end_loc;
			that.end_loc = middel;
		},250)
	},
	initDateList(){
		for (var i = 0; i <60; i++) {
			this.dateList.push({
				date: dayjs((dayjs(dayjs().format('YYYY-MM-DD')).unix()+ 86400*i)*1000).format('YYYY-MM-DD')
		
			})
		}	
	},
	openDate(){
		this.$refs.bindmobile.open()
	},
	colseCal(){
		this.$refs.bindmobile.close()
	},
	dateChange:function(date){
		var that = this;
		// this.selectDay = date.startStr.dateStr;	
		console.log('this.date',date)
		
	this.selectDay =  date.startStr.dateStr
	this.selectDayMd =  dayjs(this.selectDay).format('MM月DD日')
	this.selectDayWeek =  util.getWeek(dayjs(this.selectDay).day())
	
		this.$refs.bindmobile.close()
	},
	
	goStartCityList(){
		uni.navigateTo({
			url: '/pages/bus/start_city_list/index'
		})
	},
	goEndCityList(){
		if(!this.start_loc){
			return this.$util.Tips({title: '请先选择出发地'})
		}
		var start_city_id = '';
		var start_stop_id = ''
		if(this.start_loc.type == 1){
			start_city_id = this.start_loc.id;
		}
		if(this.start_loc.type == 2){
			start_stop_id = this.start_loc.id;
		}
		uni.navigateTo({
			url: '/pages/bus/end_city_list/index?start_city_id='+start_city_id+'&start_stop_id='+start_stop_id
		})
	},
	
   
  }
}
</script>

<style  lang="scss">

.bus-index-search{
		// background-color: #fff;
		// margin: -40px 15px 15px;
		// padding: 15px 15px 0 15px;
		// border-radius: 5px;
		// box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05);
		// position: relative;
		    padding: 0 10px;
	}
	.bus-from{
		left: 0;
		position: absolute;
		top: 15px;
		font-size: 10px;
		color: #999;
	}
	.bus-to{
		right: 0;
		position: absolute;
		top: 15px;
		font-size: 10px;
		color: #999;
	}
	.bus-index-city{
		margin-top: 10px;
		height: 60px;
		font-size: 20px;
		font-weight: 500;
		padding: 4;
		align-self: stretch;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.city-block {
		flex: 1;
		font-size: 18px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 44px;
		line-height: 44px;
	}

	.bus-station{
		height: 60px;
		line-height: 60px;
		font-weight: 700;
		flex: 1;
		opacity: 1;
		transition: all .25s ease-in-out;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		// color: #999;
	}
	.station-left {
	    text-align: left;
	}
	.station-right {
	    text-align: right;
	}
	.station-swap-view{
		color: var(--view-theme);
		width: 30px;
		align-self: stretch;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
	}
	.i-bus{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 15px;
		
	}
	.date-row {
	    height: 70px;
	    display: flex;
	    flex-direction: column;
	    align-items: baseline;
	    line-height: 70px;
		position: relative;
	}
	.date-t{
		left: 0;
		font-size: 10px;
		color: #999;
		line-height: 12px;
		font-weight: normal;
		position: absolute;
		top: 15px;
	}
	.history-row {
		padding-bottom: 12px;
		line-height: 12px;
		white-space: nowrap;
		overflow-x: auto;
		overflow: -moz-scrollbars-none;
	}
	.history-text{
		color: #999;
		font-size: 12px;
		margin-right: 11px;
		
	}
	.history-text:last-child {
	    margin-right: 0;
	}
	.tab-bar {
	    background-color: #fff;
	    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-around;
	    height: 57px;
	    box-shadow: 0 -3px 2px 0 rgba(0, 0, 0, .05);
		z-index: 99;
	}
	.tab-bar .tab-item {
	    margin-top: 6px;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    color: #333;
	    font-size: 12px;
	}
	.i-swap.swap-animation {
		transition: all .25s ease-in-out;
		transform: rotate(180deg)
	}
	.station-left.swap-animation {
	    transform: translateX(100%);
	    opacity: 0
	}
	.station-right.swap-animation {
	    transform: translateX(-100%);
	    opacity: 0
	}
</style>